<template>
    <el-dialog custom-class="import-dialog" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" :width="width" v-loading="loading">
        <!-- 提示 -->
        <div class="import-tip-box">
            <div class="import-result-preview">
                <div class="result-item">共识别到 {{ data.length }} 条数据</div>
                <div class="result-item">
                    <i class="el-icon-success"></i>
                    <span>成功：{{ successRows.length }} 条</span>
                </div>
                <div class="result-item">
                    <i class="el-icon-error"></i>
                    <span>失败：{{ failRows.length }} 条</span>
                </div>
            </div>
            <div class="import-tip-row">
                <slot name="tip">
                    <div v-if="tip" class="tip-row">
                        <i class="el-icon-warning"></i>
                        <span>tip</span>
                    </div>
                </slot>
                <div class="submit-tip">
                     <i class="el-icon-warning"></i>
                     <span>注意：提交时会自动过滤失败的数据，数据提交后会覆盖原有的数据！</span>
                </div>
            </div>
        </div>
        <!-- 表格 -->
        <div class="table-wrap">
            <el-table :data="pageData" style="width: 100%" border size="small" height="441px" :row-class-name="rowClassName">
                <el-table-column type="index" :index="getIndex" width="50" align="center" label="序号"></el-table-column>
                <!-- 动态列 -->
                <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
            </el-table>
        </div>
        <!-- 提交区域 -->
        <span slot="footer" class="dialog-footer">
            <!-- 分页 -->
             <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :pager-count="pagerCount"
                layout="total, sizes, prev, pager, next" :total="data.length">
            </el-pagination>
            <!-- 操作 -->
            <div>
                <el-button @click="handleCancelBtn" :size="size">取 消</el-button>
                <el-button type="primary" @click="handleSubmitBtn" :size="size">确 定</el-button>
            </div>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "importDialog",
    props: {
        //标题
        title: {
            type: String,
            default: "导入数据"
        },
        //表格数据
        data: {
            type: Array,
            default: function(){
                return []
            }
        },
        //表头映射
        tHeadMap: {
            type: Object,
            default: function(){
                return {}
            }
        },
        //长度
        width: {
            type: String,
            default: "800px"
        },
        //尺寸
        size: {
            type: String,
            default: "small"
        },
        //导入建议
        tip: {
            type: String,
            default: ""
        },
    },
    data() {
        return {
            loading: false,//加载状态
            dialogVisible: false,//对话框展示状态

            currentPage: 1,//当前页码
            pageSize: 10,//当前每页数量
            pageSizes: [10, 15, 20, 30, 50, 100], //可选分页数量
            pagerCount: 5,//分页最多按钮数量
        }
    },
    methods: {
        //打开弹窗
        open(){
            this.dialogVisible = true
        },
        //关闭弹窗
        close(){
            this.dialogVisible = false
        },
        //开启加载
        openLoading(){
            this.loading = true
        },
        //隐藏加载
        closeLoading(){
            this.loading = false
        },
        //取消
        handleCancelBtn(){
            this.dialogVisible = false
        },
        //确定
        handleSubmitBtn(){
            //过滤失败数据
            const tableData = this.data.filter(item=>{
                return !item.fail
            })
            //判断数据长度,否则什么也不做
            if(tableData.length == 0){
                //关闭弹窗
                this.dialogVisible = false
                //提示
                this.$message.warning("未提交任何数据！")
                return
            }
            //移除校验结果字段
            tableData.forEach(item=>{
                delete item.fail
            })
            //触发提交事件
            this.$emit('submit',tableData)
        },
        //页码切换
        handleCurrentChange(e) {
            //保存当前页码
            this.currentPage = e
        },
        //每页数量切换
        handleSizeChange(e) {
            //保存每页数量
            this.pageSize = e
            //重置页码
            this.currentPage = 1
        },
        //自定义表格行下标
        getIndex(index){
            //配合页码输出
            return (this.currentPage - 1) * this.pageSize + index + 1
        },
        //行样式，高亮问题行
        rowClassName({row,rowIndex}){
            return row.fail? "red-text":""
        }
    },
    computed: {
        //表格列，将表头映射转换成数组
        columns(){
            const result = []
            for(var key in this.tHeadMap){
                //硬编码，忽略部分字段
                if(key != 'createdAt' && key != 'updatedAt'){
                    result.push({
                        prop: key,
                        label: this.tHeadMap[key]
                    })
                }
            }
            return result
        },
        //当前页码的数据
        pageData(){
            //起始下标和结束下表
            var start = (this.currentPage -1 ) * this.pageSize
            var end = start + this.pageSize
            //剪切后返回
            return this.data.slice(start, end)
        },
        //失败数据
        failRows(){
            const failRows = this.data.filter(item=>{
                return item.fail == true
            })
            return failRows
        },
        //成功数据
        successRows(){
            const successRows = this.data.filter(item=>{
                return item.fail == false
            })
            return successRows
        }
    }
}
</script>


<style scoped lang="scss">
.el-dialog__wrapper{
    ::v-deep .import-dialog{
        .el-dialog__body{
            padding: 15px 20px 0 20px;
            .import-tip-box{
                text-align: center;
                margin-bottom: 10px;
                .import-result-preview{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .result-item{
                        margin-right: 1em;
                        .el-icon-success{
                            color: #67C23A;
                            margin-right: 0.5em;
                        }
                        .el-icon-error{
                            color: #F56C6C;
                            margin-right: 0.5em;
                        }
                        &:last-child{
                            margin-right: 0;
                        }
                    }
                }
                .import-tip-row{
                    margin-top: 4px;
                    .tip-row{
                        .el-icon-warning{
                            color: #E6A23C;
                            margin-right: 0.5em;
                        }
                    }
                    .submit-tip{
                        color: #F56C6C;
                        .el-icon-warning{
                            margin-right: 0.5em;
                        }
                    }
                }
            }
            .table-wrap{
                .el-table__row.red-text{
                    color: #F56C6C;
                }
            }
        }
        .dialog-footer{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>